<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> vue form </title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>


<!--单选框-->
    <div id="example-1" class="demo">
        <input v-model="message" placeholder="edit me">
        <p>Message is: {{ message }}</p>
    </div>
<script>
    var line = new Vue({
        el: '#example-1',
        data: {
            message: ''
        }
    })
</script>


<!--多行文本-->
<div id="multiLine">
    <span>Multiline message is:</span>
    <p style="white-space: pre">{{ message }}</p>
    <br>
    <textarea v-model="message" placeholder="add multiple lines"></textarea>

</div>
<script>
    var mulLine = new Vue({
        el: '#multiLine',
        data: {
            message: ''
        }
    })
</script>

<!--多选框-->
<form id="multicheck">
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
<br>
    <p>Checked names: {{ checkedNames }}</p>
</form>

<script>

    var check =new Vue({
        el: '#multicheck',
        data: {
            checkedNames: []
        }
    })
</script>

<div id="forSel">
    <select  v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
            {{ option.text }}
        </option>
    </select>
    <span>Selected: {{ selected }}</span>
</div>
<script>
    var forSel = new Vue({
        el: '#forSel',
        data: {
            selected: 'A',
            options: [
                { text: 'One', value: 'A' },
                { text: 'Two', value: 'B' },
                { text: 'Three', value: 'C' }
            ]
        }
    })
</script>


<!--单选下拉列表-->
<div id="sel">
    <select  v-model="selected">
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option v-bind:value="{ number: 123 }">123</option>
    </select>
    <span>Selected: {{ selected }}</span>

    <script>

        var check =new Vue({
            el: '#sel',
            data: {
                selected: []
            }
        })
    </script>
</div>

<hr>

<!--使用lazy,number,trim对v-model输入的数据进行格式化-->
<div id="format">
    <!-- 在 "change" 而不是 "input" 事件中更新 -->
    <input v-model.number="age" type="number" value=" age ">
    <input v-model.lazy="msg" value=" msg ">
    <input v-model.trim="trimMsg" value="trim msg ">
    <span>infos :{{ age }}--{{ msg }}--{{ trimMsg }}</span>

    <script>

        var check =new Vue({
            el: '#format',
            data: {
                msg:"",
                age:0 ,
                trimMsg:"",
            }
        })
    </script>
</div>


</body>
</html>
